<template>
  <div style="width: 100%">
    <template>
      <div v-if="mode === 'edit'">
        <el-calendar>
          <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
          <template slot="dateCell" slot-scope="{ date, data }">
            <p
              :class="data.isSelected ? 'is-selected' : ''"
              @click="tapDate(data)"
              slot="reference"
            >
              {{ data.day.split("-").slice(2).join("-") }}
            </p>
          </template>
        </el-calendar>
      </div>
      <div v-else>
        {{ value }}
      </div>
    </template>
  </div>
</template>
<script>
export default {
  name: "pm-calendar",
  props: {
    value: {
      type: String | Number | Object | Array,
    },
    mode: {
      // 编辑态: edit, 查看态:view , 用于在子表格内切换状态
      default: "edit",
    },
    entityModel: {
      // 如果组件绑定了一个实体, 则该属性会传入实体的数据
      default: () => {},
    },
  },
  data() {
    return {
      value1: new Date(),
      visible: false,
    };
  },
  mounted() {},
  methods: {
    tapDate(data) {
      console.log(data,"111");
        let today = data.day.split("-").slice(2).join("-")
      this.$alert("你所选择日期是"+today, " ", {
        confirmButtonText: null,
        callback: (action) => {
        //   this.$message({
        //     type: "info",
        //     message: `action: ${action}`,
        //   });
        },
      });
    },
  },
};
</script>
<style scoped>
.is-selected {
  color: #1989fa;
}
</style>
